<template>
    <div class="search-result">
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="加载失败，请点击重试"
        @load="onLoad">
            <van-cell v-for="(article,i) in list" :key="i" :title="article.title" />
        </van-list>
    </div>
</template>

<script>
import { getSearchResult } from '@/api/search'

export default {
    name: 'SearchResult',
    props: ['searchText'],
    data () {
        return {
            list: [],
            loading: false,
            finished: false,
            page: 1,
            error: false
        }
    },
    methods: {
        async onLoad () {
            try {
                const res = await getSearchResult({
                    page: this.page, // 页码
                    per_page: 20, // 每页大小
                    q: this.searchText // 关键词
                })
                // console.log(res)

                const { results } = res.data.data
                this.list.push(...results)

                this.loading = false

                if (results.length) {
                    this.page++
                } else {
                    this.finished = true
                }
            } catch (err) {
                // 显示加载失败的提示
                this.error = true
                this.loading = false
            }
        }
    }
}
</script>

<style></style>
